<template>
  <div>
    <el-form class="query-table-form" :inline="true">
      <el-form-item>
        <select-address
          v-model="params.address_code"
          placeholder="地址查询"
          clearable
          :auto-top="true"
          @change="getData()"
        ></select-address>
      </el-form-item>
      <el-form-item>
        <el-input
          v-model="params.customer_name"
          placeholder="企业名称查询"
          :clearable="true"
          @keyup.native.enter="getData()"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-input
          v-model="params.corp_name"
          placeholder="负责人查询"
          :clearable="true"
          @keyup.native.enter="getData()"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="getData()">查询</el-button>
      </el-form-item>
      <el-form-item class="float-right">
        <el-button @click="handleEdit()" type="primary" icon="el-icon-plus">新增项目</el-button>
      </el-form-item>
    </el-form>

    <c-table border v-loading="loading" :columns="tableColumns" :data="tableData">
      <template v-slot:address="scope">
        <div class="text-truncate" :title="scope.row.address">{{ scope.row.address }}</div>
      </template>
      <template v-slot:useDir="scope">
        <div class="text-truncate" :title="scope.row.funds_use_dir">
          {{ scope.row.funds_use_dir }}
        </div>
      </template>
    </c-table>

    <div class="query-pagination">
      <div></div>
      <el-pagination
        layout="total, prev, pager, next, jumper"
        :current-page.sync="params.index"
        :page-size="params.size"
        :total="totalCount"
        @current-change="getData"
      ></el-pagination>
    </div>
    <new-project
      :visible.sync="visible"
      @success="getData(params.index)"
      :customerRelatedId="relatedId"
    ></new-project>

    <el-dialog
      :visible.sync="reportVisible"
      :close-on-click-modal="false"
      :before-close="handleCreditClose"
      append-to-body
      top="30px"
      width="80%"
    >
      <el-tabs>
        <el-tab-pane label="数字档案卡">
          <credit-file :query-id="queryId" :viewMode="viewMode"></credit-file>
        </el-tab-pane>
        <el-tab-pane label="附件">
          <attach-view :queryId="queryId" :visible="reportVisible"></attach-view>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
  </div>
</template>

<script>
// import { enumOrgClass } from '@/credit/plugins/enum'
import CreditFile from '@/credit/components/creditFile/CreditCard'
import SelectAddress from '@/components/select/SelectAddress'
import NewProject from '@/credit/views/city/program/NewProject'
import AttachView from '@/credit/components/AttachView'
import { mapGetters } from 'vuex'
export default {
  components: {
    SelectAddress,
    CreditFile,
    AttachView,
    NewProject,
  },
  data() {
    return {
      params: {
        index: 1,
        size: 15,
        'submit_type.eq': '2',
        'gua_type.neq': 3,
        address_code: '',
        customer_name: '',
        corp_name: '',
      },
      tableName: 'customer_related',
      visible: false,
      relatedId: '',
      loading: false,
      reportVisible: false,
      viewMode: false,
      queryId: '',
      totalCount: 0,
      tableData: [],
      tableColumns: [
        {
          attrs: { label: '项目名称', prop: 'customer_name', minWidth: '110px' },
          process: (v, row) => ({
            attrs: { class: 'project-history', attrs: { 'data-history': row.is_history } },
          }),
        },
        //  { attrs: { label: '组织形式', prop: 'org_class', align: 'center' }, process: v => enumOrgClass[v] || '-' },
        { attrs: { label: '地址', prop: 'address' }, slot: 'address' },
        { attrs: { label: '负责人', prop: 'corp_name', align: 'center' } },
        { attrs: { label: '联系电话', prop: 'mobile_no', align: 'center' } },
        { attrs: { label: '申请金额(万元)', prop: 'apply_funds', align: 'center' } },
        { attrs: { label: '资金用途', prop: 'funds_use_dir' }, slot: 'useDir' },
        {
          attrs: { label: '新建时间', prop: 'create_time', align: 'center' },
          process: v => this.$utils.dateFormat(v, 'yyyy.MM.dd'),
        },
        { attrs: { label: '提交人', prop: 'submit_person_name', align: 'center' } },
        { attrs: { label: '指定银行', prop: 'public_bank_names', align: 'center' } },
        {
          attrs: { label: '操作', align: 'center', width: 120 },
          operations: [
            {
              content: '修改',
              icon: 'fa fa-edit',
              event: this.handleEdit,
            },
            {
              content: '修改档案卡',
              icon: 'fa fa-file-text',
              event: this.handleView,
            },
            { content: '查看', icon: 'fa fa-search', event: this.handleEditReport },
          ],
        },
      ],
    }
  },
  computed: {
    ...mapGetters(['org']),
  },
  watch: {},
  mounted() {},
  created() {
    this.params['service_id.eq'] = this.org.clientId
    this.getData()
  },
  methods: {
    getData(index = 1) {
      this.params.index = index
      this.loading = true
      this.$api
        .getData(this.$serviceName, this.tableName, this.params, { create_time: 'desc' })
        .then(res => {
          this.totalCount = (res && res.data && res.data.totalCount) || 0
          this.tableData = (res && res.data && res.data.data) || []
        })
        .catch(() => {
          this.$message.error('请求项目库失败，请刷新后重试')
        })
        .finally(() => {
          this.loading = false
        })
    },
    handleEdit(row) {
      this.visible = true
      this.relatedId = row ? row.customer_related_id : ''
    },
    handleView(row) {
      this.queryId = row.customer_related_id
      this.viewMode = false
      this.reportVisible = true
    },
    handleEditReport(row) {
      this.queryId = row.customer_related_id
      this.viewMode = true
      this.reportVisible = true
    },
    handleCreditClose() {
      this.reportVisible = false
      if (this.viewMode) {
        return
      }
      this.getData(this.params.index)
    },
  },
}
</script>
<style lang="scss" scoped></style>
